<template>
  <div class="app-container">
    <h1 class="center-title">学生就业信息管理</h1>
    <el-form :model="searchForm" inline style="margin-bottom: 20px;">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input v-model="searchForm.companyName" placeholder="请输入公司名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchStudentEmployments">搜索</el-button>
        <el-button type="success" @click="addNewStudentEmployment">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="studentEmployments" border stripe style="width: 100%">
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="gender" label="性别" width="80"></el-table-column>
      <el-table-column prop="university" label="学校" width="180"></el-table-column>
      <el-table-column prop="major" label="专业" width="150"></el-table-column>
      <el-table-column prop="college" label="学院" width="150"></el-table-column>
      <el-table-column prop="companyName" label="公司名称" width="180"></el-table-column>
      <el-table-column prop="jobTitle" label="职位名称" width="180"></el-table-column>
      <el-table-column prop="startDate" label="入职日期" width="150"></el-table-column>
      <el-table-column prop="endDate" label="离职日期" width="150"></el-table-column>
      <el-table-column prop="salary" label="薪资" width="120"></el-table-column>
      <el-table-column prop="department" label="部门" width="150"></el-table-column>
      <el-table-column prop="location" label="工作地点" width="150"></el-table-column>
      <el-table-column prop="industry" label="行业" width="150"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <span class="blue-link" @click="editStudentEmployment(scope.row)">编辑</span>
          <span class="blue-link delete-link" @click="deleteStudentEmployment(scope.row.employmentId)">删除</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>

    <!-- 编辑/新增对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学生信息" prop="studentId">
              <el-select v-model="form.studentId" placeholder="请选择学生" class="uniform-input">
                <el-option
                  v-for="student in students"
                  :key="student.studentId"
                  :label="`${student.name} (${student.gender}, ${student.university}, ${student.major})`"
                  :value="student.studentId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="公司名称" prop="companyName">
              <el-input v-model="form.companyName" class="uniform-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位名称" prop="jobTitle">
              <el-input v-model="form.jobTitle" class="uniform-input"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="入职日期" prop="startDate">
              <el-date-picker
                v-model="form.startDate"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                class="uniform-input">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离职日期" prop="endDate">
              <el-date-picker
                v-model="form.endDate"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                class="uniform-input">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="薪资" prop="salary">
              <el-input-number v-model="form.salary" :precision="2" :step="0.01" class="uniform-input"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="department">
              <el-input v-model="form.department" class="uniform-input"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工作地点" prop="location">
              <el-input v-model="form.location" class="uniform-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行业" prop="industry">
              <el-input v-model="form.industry" class="uniform-input"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" class="uniform-input"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddOrUpdateStudentEmployment">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listStudentEmployments, getStudentEmploymentById, saveOrUpdateStudentEmployment, deleteStudentEmployment } from '@/api/employment/employment';
import { getStudents } from '@/api/student/student'; // 假设有一个API来获取学生列表

export default {
  data() {
    return {
      searchForm: {
        name: '',
        companyName: ''
      },
      studentEmployments: [],
      students: [], // 学生列表数据
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      dialogTitle: '',
      form: {
        employmentId: null,
        studentId: null,
        companyName: '',
        jobTitle: '',
        startDate: '',
        endDate: '',
        salary: null,
        department: '',
        location: '',
        industry: '',
        remark: ''
      },
      rules: {
        studentId: [{ required: true, message: '请选择学生', trigger: 'change' }],
        companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        jobTitle: [{ required: true, message: '请输入职位名称', trigger: 'blur' }],
        startDate: [{ required: true, message: '请选择入职日期', trigger: 'change' }],
        salary: [{ required: true, message: '请输入薪资', trigger: 'blur' }],
        department: [{ required: true, message: '请输入部门', trigger: 'blur' }],
        location: [{ required: true, message: '请输入工作地点', trigger: 'blur' }],
        industry: [{ required: true, message: '请输入行业', trigger: 'blur' }]
      }
    };
  },
  created() {
    this.fetchStudentEmployments();
    this.fetchStudents(); // 获取学生列表数据
  },
  methods: {
    async fetchStudentEmployments() {
      try {
        const response = await listStudentEmployments({
          ...this.searchForm,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        });
        this.studentEmployments = response.rows;
        this.total = response.total;
      } catch (error) {
        this.$message.error('获取学生就业信息失败');
      }
    },
    async fetchStudents() {
      try {
        const response = await getStudents({
          currentPage: 1,
          pageSize: 100000
        }); // 假设getStudents是获取学生列表的API
        this.students = response.rows; // 假设返回的学生列表在response.rows中
      } catch (error) {
        this.$message.error('获取学生信息失败');
      }
    },
    addNewStudentEmployment() {
      this.dialogTitle = '新增学生就业信息';
      this.form = {
        employmentId: null,
        studentId: null,
        companyName: '',
        jobTitle: '',
        startDate: '',
        endDate: '',
        salary: null,
        department: '',
        location: '',
        industry: '',
        remark: ''
      };
      this.dialogVisible = true;
    },
    editStudentEmployment(row) {
      this.dialogTitle = '编辑学生就业信息';
      this.form = { ...row };
      this.dialogVisible = true;
    },
    confirmAddOrUpdateStudentEmployment() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            await saveOrUpdateStudentEmployment(this.form);
            this.$message.success('学生就业信息保存成功');
            this.dialogVisible = false;
            this.fetchStudentEmployments();
          } catch (error) {
            this.$message.error('学生就业信息保存失败');
          }
        } else {
          console.log('Validation failed!');
          return false;
        }
      });
    },
    deleteStudentEmployment(employmentId) {
      this.$confirm('确认删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteStudentEmploymentConfirmed(employmentId);
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    async deleteStudentEmploymentConfirmed(employmentId) {
      try {
        await deleteStudentEmployment(employmentId);
        this.$message.success('学生就业信息删除成功');
        this.fetchStudentEmployments();
      } catch (error) {
        this.$message.error('学生就业信息删除失败');
      }
    },
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.fetchStudentEmployments();
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.fetchStudentEmployments();
    }
  }
};
</script>

<style scoped>
/* 可以在这里添加一些样式 */
.app-container {
  padding: 20px;
}

.center-title {
  text-align: center;
  margin-bottom: 20px;
}

.el-form-item__label {
  text-align: right;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-col {
  padding-right: 10px;
  padding-left: 10px;
}

.uniform-input {
  width: 100%;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.blue-link {
  color: #409EFF;
  cursor: pointer;
  text-decoration: underline;
}

.delete-link {
  margin-left: 10px;
}
</style>



